import {Image, StyleSheet, View, Text, TouchableOpacity, Platform} from 'react-native';
import {Stack, useRouter, useLocalSearchParams} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import activelivebot from '@/assets/images/meetQuestionDetailImage/acitvelivebot.png'
import activetop from "@/assets/images/meetQuestionDetailImage/activetop.png"
import unActiveBot from '@/assets/images/meetQuestionDetailImage/unActiveBot.png'
import unActiveliveTop from '@/assets/images/meetQuestionDetailImage/unActivelivetop.png'
import {loadingService} from "@/utils/loadingServer";
import {getMeetQuestionList, postIssues} from "@/services/login";
import DeviceInfo from "react-native-device-info";

export default function meetQuestionDetailScreen() {

    const params = useLocalSearchParams();
    const router = useRouter();
    const [isActive, setIsActive] = useState<null | boolean>(null);
    const [currentQuestion, setCurrentQeustion] = useState({});


    const getQuestionList = function () {
        loadingService.show();
        getMeetQuestionList()
            .then(res => {
                res.data.forEach((item, index) => {
                    if (params.id == item?.issueId) {
                        setCurrentQeustion(item);
                    };
                })
                loadingService.hide()
            })
            .catch(err => {
                console.log('err', err);
                loadingService.hide();
            })
    };

    useEffect(() => {

        getQuestionList();

    }, []);



    useEffect(() => {
        const clickResult = isActive ? 1 : 2;
        let uniqueId = "";
        const model = DeviceInfo.getModel();
        async function getDeviceInfoData() {
            uniqueId = await DeviceInfo.getUniqueId();
            if (isActive !== null) {
                const data = {
                    clickIssueId: params.id,
                    clickResult,
                    clickDeviceId: uniqueId || "",
                    clickDeviceModel: model,
                    clickOsVersion: Platform?.Version,
                    clickAppVersion: "1.0.0",
                };
                postIssues(data)
                    .then(res => {
                        getQuestionList();
                    })
                    .catch(err => {
                        getQuestionList();
                    })
            };
        };

        getDeviceInfoData();

    }, [isActive])


    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '问题详情', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.questionDetailContainer}>
                <View style={styles.title}>
                    <Text style={styles.titleText}>
                        问题名称：{ currentQuestion?.issueName }
                    </Text>
                </View>
                <View>
                    <Text>
                        { currentQuestion?.issueAnswer }
                    </Text>
                </View>
            </View>

            <View style={styles.statusWrap}>
                {
                    isActive === true && (
                        <TouchableOpacity onPress={() => setIsActive(false)}>
                            <View style={styles.unrejectBtn}>
                                <Image source={unActiveliveTop} style={styles.activelive}/>
                                <Text style={styles.unrejectBtnText}>已解决</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }

                {
                    isActive === false && (
                        <TouchableOpacity onPress={() => setIsActive(null)}>
                            <View style={styles.rejectBtn}>
                                <Image source={activetop} style={styles.activelive}/>
                                <Text style={styles.rejectBtnText}>已解决</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }

                {
                    isActive === false && (
                        <TouchableOpacity onPress={() => setIsActive(true)}>
                            <View style={styles.unrejectBtn}>
                                <Image source={unActiveBot} style={styles.activelive}/>
                                <Text style={styles.unrejectBtnText}>未解决</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }

                {
                    isActive === true && (
                        <TouchableOpacity onPress={() => setIsActive(null)}>
                            <View style={styles.rejectBtn}>
                                <Image source={activelivebot} style={styles.activelive}/>
                                <Text style={styles.rejectBtnText}>未解决</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }


                {
                    isActive === null && (
                        <TouchableOpacity onPress={() => setIsActive(false)}>
                            <View style={styles.unrejectBtn}>
                                <Image source={unActiveliveTop} style={styles.activelive}/>
                                <Text style={styles.unrejectBtnText}>已解决</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }


                {
                    isActive === null && (
                        <TouchableOpacity onPress={() => setIsActive(true)}>
                            <View style={styles.unrejectBtn}>
                                <Image source={unActiveBot} style={styles.activelive}/>
                                <Text style={styles.unrejectBtnText}>未解决</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }


            </View>

        </View>
    );
}

const styles = StyleSheet.create({
    questionDetailContainer: {
        padding: 12,
    },
    title: {
        marginBottom: 10,
    },
    titleText: {
        fontSize: 18,
        fontWeight: "bold",
    },
    statusWrap: {
        paddingHorizontal: 12,
        flexDirection: "row",
        marginTop: 48,
        justifyContent: "space-around"
    },
    rejectBtn: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 18,
        paddingHorizontal: 44,
        borderRadius: 46,
        borderWidth: 1,
        borderColor: "#EC6138",
    },
    rejectBtnText: {
        color: "#EC6138",
        fontSize: 16,
        marginLeft: 4,
    },
    activelive: {
        width: 15,
        height: 15,
    },
    unrejectBtn: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 18,
        paddingHorizontal: 44,
        borderRadius: 46,
        borderWidth: 1,
        borderColor: "#676978",
    },
    unrejectBtnText: {
        color: "#676978",
        fontSize: 16,
        marginLeft: 4,
    },
});
